<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通知管理 - 排球队</title>
    <link rel="stylesheet" href="../../../css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        .notification-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
        }
        
        .page-header {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .page-title {
            font-size: 2.5rem;
            color: #333;
            margin-bottom: 10px;
        }
        
        .page-subtitle {
            color: #666;
            font-size: 1.1rem;
        }
        
        .notification-header {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }
        
        .notification-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .notification-category {
            background: #667eea;
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: bold;
        }
        
        .notification-date {
            color: #666;
            font-size: 0.9rem;
        }
        
        .notification-title {
            font-size: 2rem;
            color: #333;
            margin-bottom: 15px;
            line-height: 1.3;
        }
        
        .notification-author {
            color: #666;
            font-size: 1rem;
            margin-bottom: 20px;
        }
        
        .notification-content {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }
        
        .content-text {
            color: #333;
            line-height: 1.8;
            font-size: 1.1rem;
            margin-bottom: 30px;
        }
        
        .content-section {
            margin-bottom: 25px;
        }
        
        .section-title {
            font-size: 1.3rem;
            color: #333;
            font-weight: bold;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .section-content {
            color: #666;
            line-height: 1.6;
            margin-bottom: 15px;
        }
        
        .highlight-box {
            background: #f8f9fa;
            border-left: 4px solid #667eea;
            padding: 20px;
            border-radius: 5px;
            margin: 20px 0;
        }
        
        .highlight-title {
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }
        
        .highlight-content {
            color: #666;
            line-height: 1.6;
        }
        
        .notification-actions {
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }
        
        .actions-title {
            font-size: 1.3rem;
            color: #333;
            margin-bottom: 20px;
            font-weight: bold;
        }
        
        .action-buttons {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }
        
        .action-btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: bold;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .btn-primary {
            background: #667eea;
            color: white;
        }
        
        .btn-primary:hover {
            background: #5a6fd8;
            transform: translateY(-2px);
        }
        
        .btn-secondary {
            background: #f0f0f0;
            color: #333;
        }
        
        .btn-secondary:hover {
            background: #e0e0e0;
            transform: translateY(-2px);
        }
        
        .btn-success {
            background: #43e97b;
            color: white;
        }
        
        .btn-success:hover {
            background: #3dd070;
            transform: translateY(-2px);
        }
        
        .btn-danger {
            background: #f5576c;
            color: white;
        }
        
        .btn-danger:hover {
            background: #e64a5f;
            transform: translateY(-2px);
        }
        
        .notification-details {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }
        
        .details-title {
            font-size: 1.3rem;
            color: #333;
            margin-bottom: 20px;
            font-weight: bold;
        }
        
        .details-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }
        
        .detail-item {
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
        }
        
        .detail-label {
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
            font-size: 0.9rem;
        }
        
        .detail-value {
            color: #666;
            font-size: 1rem;
        }
        
        .related-content {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }
        
        .related-title {
            font-size: 1.3rem;
            color: #333;
            margin-bottom: 20px;
            font-weight: bold;
        }
        
        .related-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }
        
        .related-card {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            border-left: 4px solid #667eea;
            transition: transform 0.3s ease;
            cursor: pointer;
        }
        
        .related-card:hover {
            transform: translateY(-3px);
        }
        
        .related-card-title {
            font-size: 1.1rem;
            color: #333;
            margin-bottom: 10px;
            font-weight: bold;
        }
        
        .related-card-excerpt {
            color: #666;
            font-size: 0.9rem;
            line-height: 1.5;
            margin-bottom: 10px;
        }
        
        .related-card-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.8rem;
            color: #888;
        }
        
        .attachments {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }
        
        .attachments-title {
            font-size: 1.3rem;
            color: #333;
            margin-bottom: 20px;
            font-weight: bold;
        }
        
        .attachments-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
        }
        
        .attachment-item {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
            display: flex;
            align-items: center;
            gap: 15px;
            transition: transform 0.3s ease;
            cursor: pointer;
        }
        
        .attachment-item:hover {
            transform: translateY(-2px);
        }
        
        .attachment-icon {
            font-size: 2rem;
            color: #667eea;
        }
        
        .attachment-info {
            flex: 1;
        }
        
        .attachment-name {
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
        }
        
        .attachment-meta {
            font-size: 0.8rem;
            color: #666;
        }
        
        .stats-summary {
            background: white;
            padding: 25px;
            border-radius: 10px;
            margin-bottom: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 20px;
        }
        
        .summary-stat {
            text-align: center;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
        }
        
        .summary-number {
            font-size: 2rem;
            font-weight: bold;
            color: #667eea;
            margin-bottom: 5px;
        }
        
        .summary-label {
            color: #666;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <!-- 侧边栏 -->
    <div class="sidebar" id="sidebar">
        <div class="sidebar-header">
            <h3>排球队管理系统</h3>
            <button class="sidebar-toggle" onclick="toggleSidebar()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <nav class="sidebar-nav">
            <ul>
                <li>
                    <a href="../../index_qiu.html">
                        <i class="fas fa-home"></i>
                        首页
                    </a>
                </li>
                <li>
                    <a href="../about/about.html">
                        <i class="fas fa-info-circle"></i>
                        球队介绍
                    </a>
                </li>
                <li>
                    <a href="../players/list.html">
                        <i class="fas fa-users"></i>
                        队员信息
                    </a>
                </li>
                <li>
                    <a href="../matches/matches.html">
                        <i class="fas fa-trophy"></i>
                        比赛管理
                    </a>
                </li>
                <li>
                    <a href="../training/training.html">
                        <i class="fas fa-dumbbell"></i>
                        训练安排
                    </a>
                </li>
                <li>
                    <a href="../knowledge/index.html">
                        <i class="fas fa-book"></i>
                        排球知识
                    </a>
                </li>
                <li class="active">
                    <a href="detail.html">
                        <i class="fas fa-bell"></i>
                        通知管理
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-cog"></i>
                        系统设置
                    </a>
                </li>
            </ul>
        </nav>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
        <!-- 顶部导航栏 -->
        <div class="topbar">
            <div class="topbar-left">
                <button class="menu-toggle" onclick="toggleSidebar()">
                    <i class="fas fa-bars"></i>
                </button>
                <h1>排球队管理系统</h1>
            </div>
            <div class="switch-page">
                <button class="btn btn-secondary" onclick="switchToMainPage()">
                    <i class="fas fa-exchange-alt"></i> 流光小队
                </button>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="content">
            <div class="notification-container">
                <!-- 页面标题 -->
                <div class="page-header">
                    <h1 class="page-title">通知管理</h1>
                    <p class="page-subtitle">查看和管理球队的重要通知信息</p>
                </div>

                <!-- 统计摘要 -->
                <div class="stats-summary">
                    <div class="stats-grid">
                        <div class="summary-stat">
                            <div class="summary-number">25</div>
                            <div class="summary-label">总通知数</div>
                        </div>
                        <div class="summary-stat">
                            <div class="summary-number">8</div>
                            <div class="summary-label">未读通知</div>
                        </div>
                        <div class="summary-stat">
                            <div class="summary-number">5</div>
                            <div class="summary-label">重要通知</div>
                        </div>
                        <div class="summary-stat">
                            <div class="summary-number">12</div>
                            <div class="summary-label">本周通知</div>
                        </div>
                        <div class="summary-stat">
                            <div class="summary-number">3</div>
                            <div class="summary-label">紧急通知</div>
                        </div>
                        <div class="summary-stat">
                            <div class="summary-number">95%</div>
                            <div class="summary-label">阅读率</div>
                        </div>
                    </div>
                </div>

                <!-- 通知详情 -->
                <div class="notification-header">
                    <div class="notification-meta">
                        <span class="notification-category">重要通知</span>
                        <span class="notification-date">2024年2月12日 14:30</span>
                    </div>
                    <h1 class="notification-title">2024年春季联赛赛程安排通知</h1>
                    <p class="notification-author">发布者：张教练 | 阅读次数：156次</p>
                </div>

                <!-- 通知内容 -->
                <div class="notification-content">
                    <div class="content-text">
                        <p>各位队员：</p>
                        <p>经过与各参赛学校的协调，2024年春季排球联赛的赛程已经确定。现将具体安排通知如下，请各位队员认真阅读并做好相应准备。</p>
                    </div>

                    <div class="content-section">
                        <h3 class="section-title">
                            <i class="fas fa-calendar-alt"></i>
                            比赛时间安排
                        </h3>
                        <div class="section-content">
                            <p><strong>比赛时间：</strong>2024年3月1日 - 2024年5月31日</p>
                            <p><strong>比赛地点：</strong>市体育馆及各参赛学校体育馆</p>
                            <p><strong>比赛形式：</strong>单循环联赛制</p>
                        </div>
                    </div>

                    <div class="highlight-box">
                        <div class="highlight-title">重要提醒</div>
                        <div class="highlight-content">
                            所有队员必须提前30分钟到达比赛场地，携带有效身份证件和参赛证。比赛期间请严格遵守比赛规则和纪律要求。
                        </div>
                    </div>

                    <div class="content-section">
                        <h3 class="section-title">
                            <i class="fas fa-users"></i>
                            参赛队员名单
                        </h3>
                        <div class="section-content">
                            <p>经过教练组讨论决定，以下队员将代表我校参加本次联赛：</p>
                            <ul>
                                <li>主攻手：王队长、李主攻、孙主攻</li>
                                <li>二传手：张二传、周二传</li>
                                <li>副攻手：刘副攻</li>
                                <li>接应：赵接应</li>
                                <li>自由人：陈自由人</li>
                            </ul>
                        </div>
                    </div>

                    <div class="content-section">
                        <h3 class="section-title">
                            <i class="fas fa-dumbbell"></i>
                            赛前训练安排
                        </h3>
                        <div class="section-content">
                            <p>为了确保在比赛中发挥最佳水平，我们将加强赛前训练：</p>
                            <ul>
                                <li>每周一、三、五：技术训练（16:00-18:00）</li>
                                <li>每周二、四：体能训练（16:00-18:00）</li>
                                <li>每周六：战术训练和模拟比赛（14:00-17:00）</li>
                                <li>每周日：休息调整</li>
                            </ul>
                        </div>
                    </div>

                    <div class="content-section">
                        <h3 class="section-title">
                            <i class="fas fa-trophy"></i>
                            比赛目标
                        </h3>
                        <div class="section-content">
                            <p>本次联赛的目标是：</p>
                            <ul>
                                <li>争取进入前四名</li>
                                <li>提升团队配合能力</li>
                                <li>积累比赛经验</li>
                                <li>展示我校排球队的风采</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 通知操作 -->
                <div class="notification-actions">
                    <h3 class="actions-title">通知操作</h3>
                    <div class="action-buttons">
                        <button class="action-btn btn-primary" onclick="markAsRead()">
                            <i class="fas fa-check"></i>
                            标记为已读
                        </button>
                        <button class="action-btn btn-secondary" onclick="shareNotification()">
                            <i class="fas fa-share"></i>
                            分享通知
                        </button>
                        <button class="action-btn btn-success" onclick="addToCalendar()">
                            <i class="fas fa-calendar-plus"></i>
                            添加到日历
                        </button>
                        <button class="action-btn btn-secondary" onclick="printNotification()">
                            <i class="fas fa-print"></i>
                            打印通知
                        </button>
                        <button class="action-btn btn-danger" onclick="deleteNotification()">
                            <i class="fas fa-trash"></i>
                            删除通知
                        </button>
                    </div>
                </div>

                <!-- 通知详情 -->
                <div class="notification-details">
                    <h3 class="details-title">通知详情</h3>
                    <div class="details-grid">
                        <div class="detail-item">
                            <div class="detail-label">通知ID</div>
                            <div class="detail-value">NT20240212001</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">发布部门</div>
                            <div class="detail-value">排球队教练组</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">优先级</div>
                            <div class="detail-value">高</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">有效期至</div>
                            <div class="detail-value">2024年6月30日</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">目标受众</div>
                            <div class="detail-value">全体队员</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">状态</div>
                            <div class="detail-value">已发布</div>
                        </div>
                    </div>
                </div>

                <!-- 相关通知 -->
                <div class="related-content">
                    <h3 class="related-title">相关通知</h3>
                    <div class="related-grid">
                        <div class="related-card" onclick="viewRelatedNotification(1)">
                            <h4 class="related-card-title">训练时间调整通知</h4>
                            <p class="related-card-excerpt">
                                由于比赛临近，本周训练时间将有所调整，请各位队员注意查看新的训练安排。
                            </p>
                            <div class="related-card-meta">
                                <span>2024-02-10</span>
                                <span>训练安排</span>
                            </div>
                        </div>
                        
                        <div class="related-card" onclick="viewRelatedNotification(2)">
                            <h4 class="related-card-title">装备领取通知</h4>
                            <p class="related-card-excerpt">
                                新的比赛装备已经到位，请各位队员在指定时间内到器材室领取比赛服装和护具。
                            </p>
                            <div class="related-card-meta">
                                <span>2024-02-08</span>
                                <span>装备管理</span>
                            </div>
                        </div>
                        
                        <div class="related-card" onclick="viewRelatedNotification(3)">
                            <h4 class="related-card-title">体检安排通知</h4>
                            <p class="related-card-excerpt">
                                为确保比赛安全，所有参赛队员需要进行赛前体检，具体时间和地点请查看详细安排。
                            </p>
                            <div class="related-card-meta">
                                <span>2024-02-05</span>
                                <span>健康管理</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 附件 -->
                <div class="attachments">
                    <h3 class="attachments-title">附件</h3>
                    <div class="attachments-list">
                        <div class="attachment-item" onclick="downloadAttachment('schedule.pdf')">
                            <div class="attachment-icon">
                                <i class="fas fa-file-pdf"></i>
                            </div>
                            <div class="attachment-info">
                                <div class="attachment-name">2024春季联赛赛程表.pdf</div>
                                <div class="attachment-meta">PDF文件 | 2.5MB</div>
                            </div>
                        </div>
                        
                        <div class="attachment-item" onclick="downloadAttachment('rules.docx')">
                            <div class="attachment-icon">
                                <i class="fas fa-file-word"></i>
                            </div>
                            <div class="attachment-info">
                                <div class="attachment-name">比赛规则说明.docx</div>
                                <div class="attachment-meta">Word文档 | 1.8MB</div>
                            </div>
                        </div>
                        
                        <div class="attachment-item" onclick="downloadAttachment('training.xlsx')">
                            <div class="attachment-icon">
                                <i class="fas fa-file-excel"></i>
                            </div>
                            <div class="attachment-info">
                                <div class="attachment-name">赛前训练计划.xlsx</div>
                                <div class="attachment-meta">Excel表格 | 856KB</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 标记为已读
        function markAsRead() {
            alert('通知已标记为已读');
        }

        // 分享通知
        function shareNotification() {
            alert('分享功能正在开发中');
        }

        // 添加到日历
        function addToCalendar() {
            alert('已添加到日历');
        }

        // 打印通知
        function printNotification() {
            window.print();
        }

        // 删除通知
        function deleteNotification() {
            if (confirm('确定要删除这条通知吗？')) {
                alert('通知已删除');
            }
        }

        // 查看相关通知
        function viewRelatedNotification(id) {
            alert('查看相关通知：' + id);
        }

        // 下载附件
        function downloadAttachment(filename) {
            alert('开始下载：' + filename);
        }

        // 侧边栏切换
        function toggleSidebar() {
            const sidebar = document.getElementById('sidebar');
            const isMobile = window.innerWidth <= 768;
            
            if (isMobile) {
                // 移动端：切换侧边栏显示/隐藏
                sidebar.classList.toggle('open');
            } else {
                // 桌面端：侧边栏始终可见，不需要切换
                console.log('桌面端侧边栏始终可见');
            }
        }

        // 切换页面
        function switchToMainPage() {
            window.location.href = '../../index.html';
        }

        // 窗口大小改变时处理侧边栏状态
        window.addEventListener('resize', function() {
            const sidebar = document.getElementById('sidebar');
            const isMobile = window.innerWidth <= 768;
            
            if (!isMobile) {
                // 桌面端：确保侧边栏可见
                sidebar.classList.remove('open');
            }
        });
    </script>
</body>
</html> 